<template>
	<view class="job-second-tabbar-box u-safe-bottom u-safe-area-inset-bottom">
		<view class="job-second-tabbar">
			<view class="job-second-tabbar-home" @click="goHome()"><u-icon name="home-fill" color="#c8000a" size="27px" label="首页" labelPos="bottom" labelSize="11px" labelColor="#333333" space="3px"></u-icon></view>
			<view class="job-second-tabbar-allcity" @click="selectRegionalScope('all')"><u-icon name="/static/job/all.png" :color="allCityColor" size="14px" label="全城" labelPos="right" labelSize="13px" :labelColor="allCityColor" space="10px"></u-icon></view>
			<u-line color="#e3e3e3" direction="col" :hairline="false" length="80%" margin="8rpx"></u-line>
			<view class="job-second-tabbar-nearby" @click="selectRegionalScope('neardy')"><u-icon name="map" :color="neardyColor" size="14px" label="附近" labelPos="right" labelSize="13px" :labelColor="neardyColor" space="10px"></u-icon></view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"SecondTabbar",
		data() {
			return {
				selectColor: '#c8000a',
				unselectColor: '#666666',
				allCityColor:'#c8000a',
				neardyColor:'#666666',
			};
		},
		methods: {
			// 初始化页面数据
			goHome() {
				uni.navigateTo({
					url:'../../pages/job/job'
				})
			},
			selectRegionalScope(scope){
				if(scope == 'all') {
					this.allCityColor = '#c8000a'
					this.neardyColor = '#666666'
				} else {
					this.allCityColor = '#666666'
					this.neardyColor = '#c8000a'
				}
				// 调用父组件
				this.$emit('regional', scope);
			},
			
		},
	}
</script>

<style lang="scss" scoped>
/* 第二底部导航开始 */
.job-second-tabbar-box {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
}
.job-second-tabbar {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 86rpx;
	// position: fixed;
	// bottom: 0;
	background-color: #FFFFFF;
	border-top: 1px solid #e3e3e3;
	z-index: 11;
}
.job-second-tabbar-home {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 20%;
	background-color: #f7d9da;
}
.job-second-tabbar-allcity {
	width: 40%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.job-second-tabbar-nearby {
	width: 40%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
/* 第二底部导航结束 */
</style>
